<template>
  <div id="hangzhouSalesData"></div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick, computed } from 'vue';
export default defineComponent({
  name: 'HangzhouSalesData',
});
</script>
<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';

nextTick(() => {
  let dom = document.getElementById('hangzhouSalesData');
  let myChart = echarts.init(dom, null, { renderer: 'svg' });

  let name = '生猪存栏';
  let xData = [
    '上城区',
    '下城区',
    '拱墅区',
    '余杭区',
    '西湖区',
    '萧山区',
    '滨江区',
    '富阳区',
    '江干区',
  ];
  let yData = [5015, 4820, 5632, 4863, 2423, 3654, 4786, 1856, 4366];
  let option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      backgroundColor: 'rgba(13,5,30,.6)',
      borderColor: ' rgba(255,255,255,.2)',
      borderWidth: 1,
      padding: 5,
    },
    legend: {
      show: false,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      top: '8%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: xData,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          fontFamily: 'fontShuHeiTi',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          fontFamily: 'fontShuHeiTi',
        },
      },
    ],
    series: [
      {
        name: name,
        type: 'bar',
        // barWidth: 20,
        barMaxWidth: 20,
        barMinWidth: 10,
        minWidth: 5,
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: 20,
          normal: {
            barBorderRadius: 10,
            color: function (params) {
              let colors = [];
              // console.log(params);
              var maxIndex = 11;
              if (params.dataIndex == maxIndex) {
                colors = ['#fc532d', '#fe7018', '#ff8706'];
              } else {
                colors = ['#00aef2', '#0077fe', '#0072ff'];
              }
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: colors[0] },
                { offset: 0.5, color: colors[1] },
                { offset: 1, color: colors[2] },
              ]);
            },
          },
          emphasis: {
            color: '#fc532d',
          },
        },
        zlevel: 11,
        data: yData,
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#hangzhouSalesData {
  width: 836px;
  height: 270px;
  // border: 1px solid red;
}
</style>
